<!-- 多计量表单 -->
<template>
  <div>
    <a-form-item label="单位组名称：">
      <a-input v-model="currForm.list.name"></a-input>
    </a-form-item>

    <a-table :data="currForm.list.item">
      <template #columns>
        <a-table-column :width="80" align="center">
          <template #title> 序号 </template>
          <template #cell="{ rowIndex }">
            {{ rowIndex + 1 }}
          </template>
        </a-table-column>
        <a-table-column :width="150" align="center" title="计量单位名称">
          <template #cell="{ record }">
            <a-input
              v-model="record.name"
              @input="changeNameOrRate(record)"
            ></a-input>
          </template>
        </a-table-column>

        <a-table-column :width="150" align="center" title="父单位">
          <template #cell="{ record, rowIndex }">
            <a-checkbox
              v-model="record.isParent"
              @change="changeParent(record, rowIndex)"
            >
            </a-checkbox>
          </template>
        </a-table-column>
        <a-table-column :width="150" align="center" title="换算类型">
          <template #cell="{ record }">
            <a-select v-model="record.conversionType">
              <a-option :value="1">固定</a-option>
              <a-option :value="2">浮动</a-option>
            </a-select>
          </template>
        </a-table-column>
        <a-table-column :width="150" align="center" title="换算率">
          <template #cell="{ record }">
            <a-input-number
              :min="1"
              :disabled="record.isParent === true"
              v-model="record.conversionRate"
              hide-button
              @change="changeNameOrRate(record)"
            ></a-input-number>
          </template>
        </a-table-column>

        <a-table-column :width="300" align="center" title="换算说明">
          <template #cell="{ record }">
            <a-input disabled v-model="record.conversionRemark"></a-input>
          </template>
        </a-table-column>

        <a-table-column fixed="right" :width="200" align="center" title="操作">
          <template #cell="{ record, rowIndex }">
            <a-button type="text" @click="add(rowIndex)">新增</a-button>

            <a-popconfirm
              @ok="deleteItem(rowIndex)"
              content="确定删除吗"
              type="error"
              v-if="!record.isParent"
            >
              <a-button
                type="text"
                :style="{
                  color: 'red',
                }"
                >删除</a-button
              >
            </a-popconfirm>
          </template>
        </a-table-column>
      </template>
    </a-table>
  </div>
</template>

<script lang="ts" setup>
  import { computed, ref, reactive, watchEffect } from 'vue';
  import { cloneDeep } from 'lodash';

  const props = withDefaults(
    defineProps<{
      form?: any; // 传进来的数据
    }>(),
    {
      // form: undefined,
    }
  );

  const currForm = reactive<any>({
    list: {
      name: '',
      item: [
        {
          name: '', // 单位名称
          isParent: true, // 是否为父单位
          conversionType: 1, // 换算类型
          conversionRate: 1, // 换算率
          conversionRemark: '', // 换算说明
        },
      ],
    },
  });

  watchEffect(() => {
    currForm.list = cloneDeep(props.form);
  });

  let currParentIndex = 0; // 当前父单位所在行的index

  const changeNameOrRate = (record: any) => {
    if (
      record.isParent === false &&
      record.name !== '' &&
      currForm.list.item[currParentIndex].name !== ''
    ) {
      record.conversionRemark = `${record.conversionRate}${record.name} = 1${currForm.list.item[currParentIndex].name}`;
    } else if (record.isParent === true && record.name !== '') {
      currForm.list.item.forEach((item: any, index: number) => {
        if (index !== currParentIndex) {
          item.conversionRemark = `${item.conversionRate}${item.name} = 1${currForm.list.item[currParentIndex].name}`;
        }
      });
    }
  };

  // 修改父单位时
  const changeParent = (record: any, rowIndex: number) => {
    currParentIndex = rowIndex;
    if (currForm.list.item[rowIndex].name !== '') {
      // 先将所有的数据为不选中，然后再对应的rowIndex选中
      currForm.list.item.forEach((item: any, index: number) => {
        if (index !== rowIndex && item.name !== '') {
          item.conversionRemark = `${item.conversionRate}${item.name} = 1${currForm.list.item[currParentIndex].name}`;
        }
        item.isParent = false;
      });
    }
    currForm.list.item[rowIndex].isParent = true;
    currForm.list.item[rowIndex].conversionRate = 1; // 父单位换算率为1
    currForm.list.item[rowIndex].conversionRemark = ''; // 父单位换算率为1

    changeNameOrRate(record);
  };

  // 新增一项
  const add = (rowIndex: number) => {
    const item: any = {
      name: '',
      isParent: false,
      conversionType: 1,
      conversionRate: 1,
      conversionRemark: '',
    };
    if (currForm.list.id) item.groupId = currForm.list.id;
    currForm.list.item.splice(rowIndex + 1, 0, item);
  };

  // 删除一项
  const deleteItem = (rowIndex: number) => {
    currForm.list.item.splice(rowIndex, 1);
  };

  // 将对象导出
  defineExpose({ currForm });
</script>

<style scoped lang="less"></style>
